<template>
  <div style="padding:20px">
    <div style="text-align: center;">
      <h1 class="title">{{ $route.meta.title }} </h1>
    </div>
    <div class="btn-groups" style="height:50px">
      <a-button type="primary" class="btn" @click="downLoadFile">
        <DownloadOutlined />
        查看报告
      </a-button>
    </div>
    <div style="padding-top:30px;padding-bottom:20px" ref="content_1">
        <a-config-provider>
            <p style="line-height:200%;font-size: 16px;">
                <a-row justify="center">
                    <a-col span="6">课程名称：软件工程经济学</a-col>
                    <a-col span="6">课号：420279</a-col>
                    <a-col span="6">实验项目名称：{{$route.meta.title}}</a-col>
                </a-row>
                <a-row justify="center">
                    <a-col span="6">实验时间：<span style="border-bottom: 1px solid grey;border-radius: none;">
                            {{ experimentDate }}</span></a-col>
                    <a-col span="6">实验报告人： <span style="border-bottom: 1px solid grey;border-radius: none;">{{ accountStore.account.name
                    }} </span>
                    </a-col>
                    <a-col span="6"></a-col>
                </a-row>
            </p>
        </a-config-provider>
    </div>

    <RouterView />

  </div>
</template>

<script lang="ts" setup>
import { getPdf } from '@/api/experiment'
import { message } from 'ant-design-vue';
// 引入路由
import { useRoute } from 'vue-router';
import { useAccountStore } from '@/store/account';
const experimentDate = new Date().toISOString().slice(0, 10)
const accountStore = useAccountStore()
const rt = useRoute()
console.log(rt.meta)
async function downLoadFile() {
  const res = await getPdf(rt.meta.id.toString())
  if (!res.data) {
    window.open("_", '_blank');
  }
  else {
    // 这一步可以获取后端的message
    message.info('报告正在生成或未提交')
  }
}

</script>

<style scoped lang="less">
.title {
  font-family: sans-serif;
  font-size: 30px;
}

.btn-groups {
  display: flex;
  justify-content: flex-end;
}

.btn {
  margin-right: 10px;
}
</style>
